<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<!--
			1.确认之间的父子关系
			2.先确认两个组件之间的事件可以正常触发
			3.在父组件调用子组件的时候，通过v-on监听自定义事件，自定义的事件的回调执行父组件
			  的方法
		    4.在子组件的事件里通过this.$emit("自定义事件",参数)触发
		-->
		<div id="app">
			<math_temp></math_temp>
		</div>
		<!--计算器的模板-->
		<template id="math_temp">
			<div id="math">
				<!--显示输入的内容-->
				<div id="screen">
					{{result}}
				</div>
				<!--这是父组件监听snake，如果触发就执行get_rusult方法-->
				<con v-on:snake="get_rusult($event)"></con>
			</div>
		</template>
		<!--控制面板的模板-->
		<template id="con_temp">
			<div id="contoller">
				<ul>
					<li v-on:click="inp('c')">C</li>
					<li v-on:click="inp('=')">=</li>
					<li v-on:click="inp('AC')">AC</li>
					<li v-on:click="inp('/')">/</li>
					<li v-on:click="inp(7)">7</li>
					<li v-on:click="inp(8)">8</li>
					<li v-on:click="inp(9)">9</li>
					<li v-on:click="inp('*')">X</li>
					<li v-on:click="inp(4)">4</li>
					<li v-on:click="inp(5)">5</li>
					<li v-on:click="inp(6)">6</li>
					<li v-on:click="inp('-')">-</li>
					<li v-on:click="inp(1)">1</li>
					<li v-on:click="inp(2)">2</li>
					<li v-on:click="inp(3)">3</li>
					<li v-on:click="inp('+')">+</li>
				</ul>
			</div>
		</template>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var sum = "";
			//控制器的配置
			var con_temps = {
				template: "#con_temp",
				methods: {
					inp: function(num) {
						//console.log(num);
						//通过$emit命令触发自定义事件snake
						this.$emit('snake', num)
					},

				},
			}
			//父组件
			Vue.component("math_temp", {
					template: "#math_temp",
					components: {
						con: con_temps
					},
					data: function() {
						return {
							result: 0,
						}
					},
					methods: {
						get_rusult: function(e) {
							//type 输入的类型   ”number“ ”char“
							//							type ? type : "number";
							if(this.result == 0) {
								this.result = '';
							};
							switch(e.toString()) {
								case "=":
									this.result = eval(this.result)
									break;
								case "AC":
									this.result = this.result.substr(0, this.result.length - 1)
									break;
								case "c":
									this.result = "0"
									break;
								case "=":
									this.result = eval(this.result)
									break;
								default:
									this.result += e.toString()
									break;
							}

						}
					},

				}),
				new Vue({
					el: "#app"
				})
		</script>
	</body>

</html>